<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的收藏</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../plugins/mui/mui.min.css">
		<script src="../../js/statistics.js"></script>
		<style type="text/css">
			 *{
            box-sizing: border-box;
            font-family: 'Microsoft YaHei';

	        }
	        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form,  input, p, table, th, td ,select,option{
	            padding: 0;
	            margin: 0;
	            list-style: none;
	        }
	        body{
	        		
	        }
	        
	        .mui-table-view:before{
	        	display:none;
	        }
	        .mui-table-view:after{
	        	display:none;
	        }
	        #list{
	        	background-color:transparent;
	        	/*min-height: 100vh;*/
	        }
	        
			#list >li{
				height:95px;
				background-color:#fff;
				margin-bottom:10px;
				padding-top:0px;
				padding-bottom:10px;
				padding-left:0;
				padding-right:0;
				position:relative;
			}
			#list >li>div.mui-slider-handle{
				width:100%;
				height:95px;
				position:relative;
				padding-left:2.6%;
				padding-right:2.6%;
				padding-top:10px;
				padding-bottom:10px;
			}
			#list >li>div.mui-slider-handle>p{
				float:left;
				width:75px;
				height:75px;
				background: url() no-repeat center center;
				background-size:cover;
			}
			
			#list >li>div.mui-slider-handle>div{
				float:left;
				height:75px;
				/*width:calc( 100% - 5.2% - 75px - 2.6%);*/
				position: absolute;
				/*left:calc(5.2% + 75px);*/
			}
			#list >li>div.mui-slider-handle>div.none{
				float:left;
				height:75px;
				/*width:calc( 100% - 5.2%  );*/
				position: absolute;
				left:2.6%!important;
			}
			#list >li>div.mui-slider-handle>div>p{
				position:absolute;
				top: 50%;
				-webkit-transform: translateY(-50%) ;
				font-size:15px;
				color:#333;
				overflow : hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				word-break:break-all;
			}
			#list >li>div.mui-slider-handle>div>span{
				position:absolute;
				right:0;
				bottom:0;
				font-size: 11px;
				color:#999;
				line-height: 11px;
			}

			.mui-table-view-cell:after{
				
				display:none;
			}
			.mui-pull{
				/*display:none;*/
			}
			
			.mui-btn-red{
				font-size:15px;
				background-color:#ee3b30;
			}
			.mui-table-view-cell:first-child{
				margin-top:0px!important;
			}
			/*//空数据*/
			.kong{
				position:absolute;
				width:40%;
				top: 50%;
				left:50%;
				-webkit-transform: translateY(-50%) translateX(-50%);
				display:none;
				margin-top:-47px;
			}
			.kong>img{
				width:100%;
			}
		</style>
	</head>
	<body>
		
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
		  <div class="mui-scroll">
		    <!--数据列表-->
		    <ul class="mui-table-view mui-table-view-chevron"  id='list'>

		    </ul>
		    <div class='kong'>
				<img src="../../images/my/index/null.png" alt="" />
			</div>	
		  </div>
		</div>
		
		<script type="text/javascript" src='../../plugins/jquery/jquery-3.1.0.min.js'></script>
		<script src="../../plugins/mui/mui.min.js"></script>
		<script src="../../js/getApiToken.js"></script>
		<script src="../../js/md5.js"></script>
		<!--<script type="text/javascript" src="../plugins/mui/update.js"></script>-->
		<script type="text/javascript">
			var first=0;
			mui.init({
			  pullRefresh : {
			    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
//			    down : {
//			      height:50,//可选,默认50.触发下拉刷新拖动距离,
//			      auto: false,//可选,默认false.自动下拉刷新一次
//			      contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
//			      contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
//			      contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
//			      callback :function(){
//			      	  mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
//			      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			     up : {
				      height:40,//可选.默认50.触发上拉加载拖动距离
				      auto:false,//可选,默认false.自动上拉加载一次
				      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
				      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
				      callback :function pullfresh() {
				      	
				      	if(true){
				      		myAjax('card/card/getUserCollect', 'get', {
								'user_id': plus.storage.getItem('cg_user_id'),
								'user_token': plus.storage.getItem('cg_user_token'),
								'page_cnt':3,
								'update_time':updateTime
							}, function(data) {
								updateTime=data.update_time;
								if(data.success){
									if(data.data.length<3){
										mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
									}else{
										mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
									}
									
									for(var i=0;i<data.data.length;i++){
										var a=add(data.data[i].path,data.data[i].title,data.data[i].update_time,data.data[i].article_id);
										$('#list').append(a);
									}
									calc();
								}else{
									mui.toast(data.error_msg);
								}
							})
				      	}
						first++;
						    
						}
				   } 
				}
			});
			
			
			var updateTime;//第二次ajax用来取数据
			
			
			
			mui.plusReady(function() {
				
			var self = plus.webview.currentWebview();
			
			if(self.height){
				$('#list').css({'minHeight':self.height-95+'px'});
			}
//			console.log(document.documentElement.clientHeight);
			$('#list').delegate('.mui-btn-red','tap',function(){
				$(this).attr('data-id');
				var me=this;//留住this
				mui.confirm('确认取消收藏该条帖子吗？', '取消收藏', function(e) {
						if (e.index == 0) {
							//取消
						} else {
							
							plus.nativeUI.showWaiting('取消收藏中...');
							//删除数据
							 myAjax('card/card/cancelCollect', 'post', {
												'user_id': plus.storage.getItem('cg_user_id'),
												'user_token': plus.storage.getItem('cg_user_token'),
												'article_id':$(me).attr('data-id')
										}, function(data) {
												
												if(data.success){
													plus.nativeUI.closeWaiting();
													$(me).parent().parent().fadeOut();
													$(me).parent().parent().remove();
													if(!$('#list>li').length){
														$('.kong').show();
													}
													
												}else{
													mui.toast(data.error_msg);
												}
							})
							
							
						}
					});
			})
			
			$('#list').delegate('.mui-slider-handle','tap',function(){
				//获取当前点击进去的时间戳
				var clickTime=String(new Date().getTime());
				console.log(typeof clickTime);
				
				console.log(clickTime+"当前点击的时间。。。");
				plus.storage.setItem('timeNew',clickTime);
				var href='http://citygo.0519ztnet.com/share/news/detail/id/26?from=singlemessage&isappinstalled=1';
				plus.storage.setItem('href',href);


				//帖子跳转
				if($(this).parent().attr('data-id')){
					mui.openWindow({
						url: '../city/tribune_detail.html',
						id: '../city/tribune_detail.html',
						show: {
							autoShow: false, //页面loaded事件发生后自动显示，默认为true
							duration: 200 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
						},
						waiting: {
							title: '正在加载...' //等待对话框上显示的提示内容
						},
						extras:{
							'article_id':$(this).parent().attr('data-id'),  //扩展参数
							"clickTime":clickTime,
							'save':plus.storage.getItem('timeNew')
						}
					})
				}
			})	
			
			//刚进来自动获取8条数据
			plus.nativeUI.showWaiting();
			 myAjax('card/card/getUserCollect', 'get', {
								'user_id': plus.storage.getItem('cg_user_id'),
								'user_token': plus.storage.getItem('cg_user_token'),
								'page_cnt':8
								
							}, function(data) {
								
								if(data.success){
									updateTime=data.update_time;
									if(data.data.length<8){
										mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
									}
									
									if(!data.data.length){
										$('.kong').show();
									}
									
									for(var i=0;i<data.data.length;i++){
										var a=add(data.data[i].path,data.data[i].title,data.data[i].update_time,data.data[i].article_id);
										$('#list').append(a);
										
									}
									calc();
									plus.nativeUI.closeWaiting();
								}else{
									mui.toast(data.error_msg);
								}
			})
		});		 
			//a图片 b标题 c审核状态 d时间
			function add(a,b,d,p){
				if(a){
					var a="<p style='background-image: url("+(_baseUrl+a)+");'></p>"
					var y=''
				}else{
					var a='';
					var y='none'
				}
				
				
				
				var d='<span>'+d+'</span>';
				
			return '<li class="mui-table-view-cell" data-id='+p+'>'+
						'<div class="mui-slider-right mui-disabled">'+
							'<a class="mui-btn mui-btn-red" data-id='+p+'>取消收藏</a>'+
						'</div>'+
						'<div class="mui-slider-handle">'+
							a+
							'<div class="'+y+'">'+
			    				'<p>'+b+'</p>'+
			    				d+
			    			'</div>'+
						'</div>'+
				'</li>'
				
			}
			
			//适配CSScalc函数
			function calc(){
				$('#list>li>div.mui-slider-handle>div').css({'width':document.body.clientWidth*0.922 -75+'px'});
				$('#list>li>div.mui-slider-handle>div').css({'left':document.body.clientWidth*0.052 + 75 +'px'});
				$('#list >li>div.mui-slider-handle>div.none').css({'width':document.body.clientWidth*0.948+'px'});
			}
			
			
		</script>
	</body>
</html>
